<include file="public@header"/>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class=""><a href="{:url('index',array('id'=>$id))}">工程奖励/罚款</a></li>
        <li class="active"><a>编辑</a></li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('doedit')}"
          enctype="multipart/form-data" id="uploadForm">


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>日期
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="date" class="form-control" name="date" value="{$res['date']}">
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>执行人
            </label>
            <div class="col-md-6 col-sm-10">
                <select name="sid" class="form-control">
                    <option value="{$res.sid}">{$res['sname']}</option>
                    <volist name="staff" id="v">
                        <option value="{$v.id}">{$v.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>支付方式
            </label>
            <div class="col-md-6 col-sm-10">
                <select name="pay" class="form-control">
                    <?php
                        if($res['pay'] == 1){ ?>
                    <option value="1">微信</option>
                    <?php }elseif($res['pay'] ==2){?>
                    <option value="2">支付宝</option>
                    <?php }elseif($res['pay'] ==3){?>
                    <option value="3">银行卡</option>
                    <?php }elseif($res['pay'] ==4){?>
                    <option value="4">现金</option>
                    <?php }?>
                    <option value="1">微信</option>
                    <option value="2">支付宝</option>
                    <option value="3">银行卡</option>
                    <option value="4">现金</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                班组长
            </label>
            <div class="col-md-6 col-sm-10">
                <select name="lid" id="nameSelect" class="form-control">
                    <option value="">请选择班组长</option>
                    <volist name="leader" id="v">
                        <option value="{$v.id}" data-type="{$v['type']}" <eq name="v.id" value="$res.lid">selected
                            </eq>>{$v['name']}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                班组
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="text" id="teamDisplay" class="form-control" readonly>
                <input type="hidden" name="tid" value="{$res['lid']}">
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>奖罚事项
            </label>
            <div class="col-md-6 col-sm-10">
                <textarea name="desc" cols="20" rows="5" class="form-control">{$res['desc']}</textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>金额
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="number" class="form-control" name="price" value="{$res['price']}">
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">凭证
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="file" id="imgUpload" name="img[]" multiple accept="image/*" class="form-control" />
                <div id="imgPreviewContainer" class="image-preview-container"
                    style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
            </div>
        </div>
        
        <input type="hidden" name="id" value="{$res['id']}">

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
            </div>
        </div>
    </form>
</div>

<!-- 图片查看模态框 -->
<div id="imageModal" class="image-modal">
    <span class="modal-close">&times;</span>
    <img class="modal-content" id="largeImage">
</div>

<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/image-uploader.js"></script>
<style>
    .image-preview-item {
        position: relative;
        margin: 5px;
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
    }
    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .image-preview-item .delete-btn {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(255, 0, 0, 0.7);
        color: white;
        border: none;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        z-index: 10;
    }
    .file-preview-item {
        position: relative;
        margin: 5px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        width: 250px;
        background-color: #f9f9f9;
    }
    .file-preview-item .file-name {
        margin-right: 10px;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 模态框样式 */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: auto;
    }
    
    .modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        margin-top: 2%;
    }
    
    .modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }
</style>
<script>
    // 显示大图
    function showLargeImage(src) {
        const modal = document.getElementById('imageModal');
        const largeImage = document.getElementById('largeImage');
        largeImage.src = src;
        modal.style.display = 'block';
    }

    // 关闭模态框
    document.querySelector('.modal-close').onclick = function() {
        document.getElementById('imageModal').style.display = 'none';
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        const modal = document.getElementById('imageModal');
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    // 姓名选择框联动班组
    document.getElementById('nameSelect').addEventListener('change', function () {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption) {
            const typeValue = selectedOption.getAttribute('data-type');
            const teamDisplay = document.getElementById('teamDisplay');
            teamDisplay.value = typeValue || ''; // 设置班组输入框的值
            
            // 同时更新隐藏的tid输入框
            document.querySelector('input[name="tid"]').value = this.value;
        }
    });

    // 页面加载完成后初始化所有功能
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化班组显示
        initializeTeamDisplay();
        
        // 初始化图片上传组件
        const imgUploader = new ImageUploader({
            inputId: 'imgUpload',
            previewContainerId: 'imgPreviewContainer',
            fieldName: 'img',
            existingImages: [
                <if condition="$res['img'] !== false">
                    <volist name="res['img']" id="v" key="k">
                        "{$v}",
                    </volist>
                </if>
            ],
            useDataTransfer: true
        });
    });
    
    // 页面加载时初始化班组
    function initializeTeamDisplay() {
        const nameSelect = document.getElementById('nameSelect');
        const selectedOption = nameSelect.options[nameSelect.selectedIndex];
        if (selectedOption) {
            const typeValue = selectedOption.getAttribute('data-type');
            const teamDisplay = document.getElementById('teamDisplay');
            teamDisplay.value = typeValue || ''; // 设置班组输入框的值
        }
    }
</script>
</body>
</html>